<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload=function () {
            //当鼠标滚轮向下滚动时，box1变长，向上滚动时，box1变短
            var box1=document.getElementById("box1");
            box1.onmousewheel=function (event) {
                // alert("滚轮");
                event=event||window.event;
                // alert(event.wheelDelta);// 向上滚120 向下滚-120 这个属性火狐不支持
                // alert(event.detail);//向上滚动3 向下滚动-3 只有火狐在用
                if (event.wheelDelta>0||event.detail<0){
                    //向上滚轮 box1变短
                    box1.style.height=box1.clientHeight-10+"px";
                }else {
                    //向下滚轮 box1变长
                    box1.style.height=box1.clientHeight+10+"px";
                }
                //火狐不能用retrurn false因为是绑定的addElementListener()函数
                //需要使用event取消默认行为 用event.preventDefault();但是IE8也会报错
                event.preventDefault&&event.preventDefault();//取消火狐默认行为的
                return false;//取消浏览器的默认行为 滚动条在动
            };
            //为火狐绑定滚轮事件
            bind(box1,"DOMMouseScroll",box1.onmousewheel);
            function bind(obj,eventStr,callback) {
                if (obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr,callback,false);
                }else {
                    //IE8及以下版本的
                    obj.attachEvent("on"+eventStr,function () {
                        //在匿名函数中调用回调函数 修改this
                        callbcak.call(obj);
                    });
                }
            }
        }
    </script>
</head>
<body height="2000px">
<script>
    /*onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持
    *DOMMouseScroll在火狐中使用来绑定滚轮事件
    *event.wheelDelta滚轮 向上滚轮向下滚轮的 火狐不支持 向上滚-3 向下滚3
    *
    * */
</script>
<div id="box1"></div>
</body>
</html>